<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      #outer-1 {
        width: 120px;
        height: 80px;
        background-color: lightcyan;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #inner-1 {
        background-color: lightskyblue;
      }

      #outer-2 {
        width: 120px;
        height: 80px;
        background-color: lightcyan;

        display: grid;
        place-items: center;
      }
      #inner-2 {
        background-color: lightskyblue;
      }

      /* absolute + margin auto */
      #outer-3 {
        width: 120px;
        height: 80px;
        background-color: lightcyan;

        position: relative;
      }
      #inner-3 {
        width: 60px; /* 子元素需要确定宽高 */
        height: 40px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background-color: lightskyblue;
      }

      /* absolute + -margin */
      #outer-4 {
        width: 120px;
        height: 80px;
        background-color: lightcyan;

        position: relative;
      }
      #inner-4 {
        width: 60px; /* 子元素需要确定宽高 */
        height: 40px;

        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -30px; /* 减去自身宽度的一半 */
        margin-top: -20px; /* 减去自身高度的一半 */
        background-color: lightskyblue;
      }

      /* absolute + translate */
      #outer-5 {
        width: 120px;
        height: 80px;
        background-color: lightcyan;

        position: relative;
      }
      #inner-5 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: lightskyblue;
      }

      /* absolute + calc */
      #outer-6 {
        width: 120px;
        height: 80px;
        background-color: lightcyan;

        position: relative;
      }
      #inner-6 {
        width: 60px; /* 子元素需要确定宽高 */
        height: 40px;
        position: absolute;
        top: calc(50% - 20px);
        left: calc(50% - 30px);

        background-color: lightskyblue;
      }

      /* line-height + inline-block */
      #outer-7 {
        width: 120px;
        height: 80px;
        background-color: lightcyan;

        text-align: center;
        line-height: 80px; /* 与高度同高 */
        font-size: 0px;
      }
      #inner-7 {
        background-color: lightskyblue;

        display: inline-block;
        font-size: 16px;
        line-height: initial;
        vertical-align: middle;
      }

      /* table-cell */
      #outer-8 {
        width: 120px;
        height: 80px;
        background-color: lightcyan;

        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
      #inner-8 {
        background-color: lightskyblue;

        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h6>flex:</h6>
    <main id="outer-1">
      <div id="inner-1">inner</div>
    </main>
    <h6>grid:</h6>
    <main id="outer-2">
      <div id="inner-2">inner</div>
    </main>
    <h6>absolute + margin auto:</h6>
    <main id="outer-3">
      <div id="inner-3">inner</div>
    </main>
    <h6>absolute + -margin:</h6>
    <main id="outer-4">
      <div id="inner-4">inner</div>
    </main>
    <h6>absolute + translate:</h6>
    <main id="outer-5">
      <div id="inner-5">inner</div>
    </main>
    <h6>absolute + calc:</h6>
    <p>和方法四的原理一样</p>
    <main id="outer-6">
      <div id="inner-6">inner</div>
    </main>
    <h6>inline-block:</h6>
    <p>不支持怪异模式，html 头部需要添加 &lt;!DOCTYPE html&gt; 标签</p>
    <main id="outer-7">
      <div id="inner-7">inner</div>
    </main>
    <h6>table-cell + inline-block:</h6>
    <p>在 flex 和 grid 布局下无效</p>
    <main id="outer-8">
      <div id="inner-8">inner</div>
    </main>
  </body>
</html>
